import React from 'react'
import {Modal} from 'antd'
import AddForm from './AddForm'
//时间管理
export default class Message extends React.Component {
    delCer(element){
        fetch("http://localhost:8080/q",{
            method:'post',
            headers:{
                'Accept':'application/json,text/plain,*/*',/* 格式限制：json、文本、其他格式 */
                'Content-Type':'application/x-www-form-urlencoded'/* 请求内容类型 */
            },
            body:`id=${element.element.cerName}`})
            window.location.reload()
    }
    handleOk=()=>{
        this.form.validateFields(async(err,values)=>{
            if(!err){//如果本地表单验证通过
                this.setState({isShow:false}) //关闭弹窗
                //1.收集表单数据
                const data=values
                fetch('http://localhost:8080/t',{
                    method:'post',
                    headers:{
                    'Accept':'application/json,text/plain,*/*',/* 格式限制：json、文本、其他格式 */
                    'Content-Type':'application/x-www-form-urlencoded'/* 请求内容类型 */
                },
                body:[`data=${data.name},${data.applyTime},${data.testTime}`]
                })
                window.location.reload()
        }})
                 
    }
    handleCancel=()=>{
        this.setState({isShow:false})
    }
    constructor(){
        super()
        this.state={
          banners:[],
        }
      }
      componentDidMount(){
        fetch("http://localhost:8080/")
        .then(res => res.json())
        .then(data => {
            this.setState({
                banners:data.data
            })
        })
    }
    render() {
        return (
            <div>
                <button onClick={()=>this.setState({isShow:true})}>添加时间</button>
                 {
                this.state.banners.map((element,index)=>{
                    return(
                        <ul style={{listStyleType:'none'}}>
                            <li key={index}>
                                <div>考证科目：{element.cerName} 报名时间：{element.cerApplyTime} 考试时间：{element.cerTestTime} 
                                &nbsp;&nbsp;&nbsp;<button onClick={()=>this.delCer({element})}>删除</button></div>
                            </li>
                        </ul>
                        
                    )
                })
                }
                <Modal
                        title='添加用户'
                        visible={this.state.isShow}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}>
                        <AddForm setForm={form =>this.form=form}  />
                    </Modal>
            </div>
        )
    }
}
    